<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .div_head{
            padding: 0;
            position:fixed;
            width: 100%;
            height: 4rem;
            right: 0;
            top:0;
            background-color:white;
            z-index: 55;
        }
        #head_span{
            display: block;
            margin: 9px 70px 0 0 ;
        }
        #head_span>a{
            text-decoration: none;
            color: #909399;
            margin-left: 20px;
        }
        #head_span a:hover{
            color: rgb(145, 160, 208);
        }


    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="div_head">
            <el-menu mode="horizontal" background-color="white"
                     text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
                <el-menu-item><img  height="50px" src="imgs/logo.png" alt=""></el-menu-item>
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">蛋糕</el-menu-item>
                <el-menu-item index="3">下午茶</el-menu-item>
                <el-menu-item index="4">精选食材</el-menu-item>
                <el-menu-item index="5">最新活动</el-menu-item>
                <el-menu-item index="6">企业专区</el-menu-item>
                <el-menu-item index="6">会员中心</el-menu-item>
                <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="login.html">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>
                </div>
            </el-menu>
        </div>
        </el-header>

        <el-main>
            <el-form label-width="100px" style="width: 400px;margin: 50px auto;display: block">
                <p style="text-align: center;position: relative;left: 20px;">新会员注册</p>
                <hr>
                <el-row :gutter="20">
                    <el-col :span="6"> <el-form-item label="用户名" style="position: relative;right: 16px"></el-form-item></el-col>
                    <el-col :span="18"><el-input type="text"></el-input></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"> <el-form-item label="昵称" style="position: relative;right: 16px"></el-form-item></el-col>
                    <el-col :span="18"><el-input type="text"></el-input></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"> <el-form-item label="密码" style="position: relative;right: 16px"></el-form-item></el-col>
                    <el-col :span="18"><el-input type="password"></el-input></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"> <el-form-item label="确认密码" style="position: relative;right: 16px"></el-form-item></el-col>
                    <el-col :span="18"><el-input type="password"></el-input></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6"> <el-form-item label="手机号码" style="position: relative;right: 16px"></el-form-item></el-col>
                    <el-col :span="18"><el-input type="text"></el-input></el-col>
                </el-row>
                <el-button style="margin-left: 200px">注册</el-button>
                <br>
                <template>
                    <el-checkbox v-model="checked" style="position: relative;left: 20px;font-size: 10px" >已阅读并同意有佳会员协议和隐私保护政策</el-checkbox>
                </template>
            </el-form>
        </el-main>

        <el-footer>
            <div style="background-color: #282c30;color: #666666;text-align: center;padding: 50px 0">
                <p>有家蛋糕 提前3小时预订，北京市六环内免费配送 公司地址：北京市朝阳区798艺术区工美楼3层</p>
                <p>Copyright © 2009-2023 ebeecake有家蛋糕 有家（北京）食品有限公司 京ICP备09081733号-1 <img src="https://cdn.tmooc.cn/tmooc-web/css/img/beianh2019082901.png"> 京公网安备 11010802029572号</p>
                <p>公司电话：4006106798    食品经营许可证：JY11105110232865    食品生产许可证：SC12411051114584</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                checked: true
            }
        },
        methods:{
            handleSelect(key,keyPath){
                console.log(key,keyPath);
            }

        }
    })
</script>
</html>